<template>
  <div class="login-box">
    <el-card class="box-card">
      <el-container class="header-container">
        <el-header><img src="./4.jpg" height="108" width="100"/>
<!--          <h2>云算生肖钞配号系统</h2>-->
        </el-header>
      </el-container>
      <el-tabs v-model="activeName" class="login-tabs">
        <el-tab-pane label="密码登录" name="password">
          <el-form :model="form" ref="formRef" class="login-form" label-position="top">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
<!--        <el-tab-pane label="短信验证码登录(审核中)" name="code">-->
<!--          <el-form :model="form" ref="formRef" class="login-form" label-position="top">-->
<!--            <el-form-item label="手机号" prop="phone">-->
<!--              <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item v-if="activeName === 'code'" label="短信验证码" prop="code">-->
<!--              <div style="display: flex; width: 100%">-->
<!--                <el-input v-model="form.code" placeholder="请输入短信验证码" style="width: calc(100% - 112px); margin-right: 10px"></el-input>-->
<!--                <el-button type="primary" :disabled="countdown > 0" @click="getCode">-->
<!--                  {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}-->
<!--                </el-button>-->
<!--              </div>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </el-tab-pane>-->
      </el-tabs>
      <div class="allow-box">
        <div>
          <el-checkbox v-model="agreed"/>
          <span style="padding-left: 8px">我已阅读并同意</span>
          <span style="color: #409eff">免责声明</span>
        </div>
        <el-link type="primary" href="/register" style="font-size: 16px">注册账号</el-link>
      </div>
      <el-button type="primary" :disabled="!isFormValid || !agreed" @click="submit" style="width: 100%; margin-top: 12px; height: 38px">登录</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import router from "@/router";
import {login, loginByPhone} from "@/api/login";
import Cookies from 'js-cookie';

const activeName = ref('password');
const agreed = ref(false);
const form = ref({
  phone: '',
  calculationAnswer: '',
  password: '',
  code: '',
  agreed: false
});
const formRef = ref(null);
// const countdown = ref(0);

const isFormValid = computed(() => {
  if (activeName.value === 'password') {
    return form.value.phone.length > 0;
  } else {
    return (
        form.value.phone.length > 0 && form.value.code.length > 0
    );
  }
});

// const getCode = () => {
//   if (countdown.value > 0) return;
//   // 模拟获取验证码逻辑
//   sendPhoneCode(form.value.phone).then(res => {
//     if (res.code === 200) {
//       ElMessage.success('验证码已发送');
//       countdown.value = 60;
//       const timer = setInterval(() => {
//         if (countdown.value > 0) {
//           countdown.value--;
//         } else {
//           clearInterval(timer);
//         }
//       }, 1000);
//     } else {
//       ElMessage.error(res.msg);
//     }
//   });
// };

const submit = () => {
  // 模拟登录逻辑
  if (isFormValid.value) {
    if (activeName.value === 'password') {
      login(form.value.phone, form.value.password).then(res => {
        if (res.code === 200) {
          ElMessage.success('登录成功');
          Cookies.set('token', res.token, { expires: 7 });
          router.push('/nav');
        } else {
          ElMessage.error(res.msg);
        }
      });
    } else {
      form.value.password = form.value.code;
      loginByPhone(form.value.phone, form.value.password).then(res => {
        if (res.code === 200) {
          ElMessage.success('登录成功');
          Cookies.set('token', res.token, { expires: 7 });
          router.push('/nav');
        } else {
          ElMessage.error(res.msg);
        }
      });
    }
  } else {
    ElMessage.warning('请完善表单信息');
  }
};
</script>

<style lang="less">
.login-box {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;

  .box-card {
    width: 100%;
  }

  .el-form-item__label {
    width: 100% !important;
    font-weight: bold !important;
    font-size: 17px;
    color: #000;
  }

  .header-container {
    margin-bottom: 20px;
  }

  .el-header {
    padding: 0;
  }

  .allow-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
